<template>
  <el-container class="box1">
    <el-main >
      <!-- 登录的form表单-->
      <h1 class="title"> 用户登陆 </h1>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="用户名" prop="uTelephone">
          <el-input v-model="ruleForm.uTelephone" prefix-icon="el-icon-s-custom"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="uPassword">
          <el-input v-model="ruleForm.uPassword" type="password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>

        <router-link to="/pass" target="_blank" class="pas">
          <span >忘记密码</span>
        </router-link>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>


      </el-form>

    </el-main>
  </el-container>
</template>

<script>
    import Qs from 'qs';
    export default {
        name: "Login",
        data(){
            return {
                ruleForm:{
                  uTelephone:'',
                    uPassword:''
                },
                rules: {
                  uTelephone: [
                        {required: true, message: '请输入正确手机号', trigger: 'blur'},
                        {min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: 'blur'}
                    ],
                    uPassword:[{required: true, message: '请输入密码', trigger: 'blur'}],
                }
            }
        },
        methods:{
            submitForm(formName) {
              console.log(formName)
                var vm = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.axios({
                            method:"post",
                            url:'http://localhost:80/api/user/look',
                            /* 转换 request请求格式为 key == value*/
                            transformRequest: [function (data) {
                                return Qs.stringify(data)
                            }],
                            data:this.ruleForm
                        }).then(function (res) {
                            if(res.data.success){
                                /* 用户信息 放到 seesion中  前端*/
                                var str = JSON.stringify(res.data.data);
                                console.log(str);
                                console.log(typeof str);
                                sessionStorage.setItem("userinfo",str);

                                 vm.$router.push("/index");
                              // vm.$router.push({name:"index",params:{uAlias:res.data.data}});

                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }

        }

    }
</script>

<style scoped>

  .box1{
    margin: 100px auto;
    border:1px solid #DCDFE6;
    box-shadow: 0px 0px 5px #DCDFE6;
    border-radius: 10px;
    width: 650px;
    height: 350px;
  }
  .demo-ruleForm{
    padding: 0px 50px 0px 10px;
  }
  .title{
    text-align: center;
  }
  .pas{
   margin-left:10px;
  }
</style>
